<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令语法</title>
		<!-- 通过CDN的方式安装VUE -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- 指令语法 常用于属性的赋值 -->
			<a v-bind:href="phoneUrl">买手机活动</a>
			<!-- 自定义属性也可以赋值 -->
			<button type="button" v-bind:uId="id">删除当前行</button>
			<!-- 简单写法 -->
			<button type="button" :uId="id">删除当前行</button>
			<h1>
				姓名：{{ user.name }} 年龄：{{ user.age }} 性别：{{ user.sex }}
			</h1>
		</div>
		<!-- HTML2.0之后放在</body>后是不符合标准的 -->
		<script type="text/javascript">
			const vm = new Vue({
				//作用域
				el:'#box',
				//目前是死的，后续会调接口获取数据
				data:{
					phoneUrl:'https://www.mi.com/?masid=2701.0313',
					id:100010,
					user:{
						age:10,
						name:'张三',
						sex:'男'
					}
				}
			});
		</script>
	</body>
</html>
